<template>
	<view>
		<navbar top="80rpx"></navbar>
		<view class="container b-f">
			<!-- 顶部选项卡 -->
			<!--      <view class="swiper-tab dis-flex box-align-center flex-y-center">
        <template v-for="(item, index) in tabList" v-key="this">
          <view :class="'swiper-tab-item' + (dataType == item.value ? ' on' : '')" :data-current="item.value"
                @click="swichNav">{{ item.text }}</view>
        </template>
      </view> -->
			<!-- 提现明细列表 -->
			<scroll-view scroll-y bindscrolltolower="triggerDownLoad" :style="'height:' + swiperHeight + 'px;'">
				<view v-if="0 < date.length" class="widget-list">
					<view v-for="(item, index) in date"
						class="widget__detail dis-flex flex-x-between flex-y-center" :key="item.id">
						<view class="detail__left dis-flex flex-dir-column flex-x-around">
							<view class="detail__money f-30">返利 {{ item.total_amount }}元</view>
							<view class="detail__time col-9 f-24">{{ item.time }}</view>
								<view class="detail__reason f-24">订单号：{{item.txn_seqno}}</view>
						</view>
						<view class="detail__right dis-flex flex-dir-column flex-x-center flex-y-center">
							<!-- 申请状态 状态 10：代发中 20：代发成功 21：取消 30：代发失败 -->
							<view class="detail__status f-28" style=" width: 150rpx;text-align: center;color: crimson;">
								{{item.statusText}}
							</view>
						</view>
					</view>
				</view>
				<!-- 没有记录 -->
				<view v-if="date.length == 0 && !isLoading" class="yoshop-notcont">
					<text class="iconfont icon-wushuju"></text>
					<text class="cont">暂无相关返利记录哦</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import navbar from "@/components/navbar/navbar";
	export default {
		components: {
			navbar
		},
		data() {
			return {
				applyStatus: [],
				isLoading: true,
				dataType: -1,
				page: 1,
				no_more: false,
				tabList: [],
				list: {
					data: []
				},
				date:[]
			}
		},
		onLoad: function(options) {
			// 设置swiper的高度
			this.setSwiperHeight();
		},
		onShow: function() {
			// 获取提现明细列表
			this.getWithdrawList();
		},
		methods: {
			/**
			 * 获取提现明细列表
			 */
			getWithdrawList: function(isNextPage, page) {
				let _this = this;
				app._get('finance_grant/index', {
					status: _this.dataType,
					page: page || 1,
				}, function(result) {
					// 创建页面数据
					console.log(result.data.data)
					_this.date = result.data.data
					_this.date.map((item)=>{
						item.time = new Date(item.callback_time * 1000).toLocaleString()
						if(item.status == 10){
							item.statusText = '代发中'
						}else if(item.status == 20){
							item.statusText = '已到账'
						}else if(item.status == 21){
							item.statusText = '取消'
						}else if(item.status == 30){
							item.statusText = '失败'
						}
					})
					_this.setData(_this.createData(result.data, isNextPage));
				});
			},

			/**
			 * 创建页面数据
			 */
			createData: function(data, isNextPage) {
				data['isLoading'] = false;
				// 列表数据
				let dataList = this.list;
				if (isNextPage == true && (typeof dataList !== 'undefined')) {
					data.list.data = dataList.data.concat(data.list.data)
				}
				// // 设置当前页面标题
				// wx.setNavigationBarTitle({
				// 	title: data.words.withdraw_list.title.value
				// })
				// 导航栏数据
				// 审核状态
				return data;
			},
			/**
			 * 设置swiper的高度
			 */
			setSwiperHeight: function() {
				// 获取系统信息(拿到屏幕宽度)
				let systemInfo = wx.getSystemInfoSync(),
					rpx = systemInfo.windowWidth / 750, // 计算rpx
					tapHeight = Math.floor(rpx * 82), // tap高度
					swiperHeight = systemInfo.windowHeight - tapHeight; // swiper高度
				this.setData({
					swiperHeight
				});
			},
			/** 
			 * 点击tab切换 
			 */
			swichNav: function(e) {
				let _this = this,
					current = e.target.dataset.current;
				if (_this.dataType == current) {
					return false;
				}
				_this.setData({
					dataType: current,
					list: {
						data: []
					},
					page: 1,
					no_more: false,
					isLoading: true,
				}, function() {
					// 获取提现明细列表
					_this.getWithdrawList();
				});
			},
			/**
			 * 下拉到底加载数据
			 */
			triggerDownLoad: function() {
				// 已经是最后一页
				if (this.page >= this.list.last_page) {
					this.setData({
						no_more: true
					});
					return false;
				}
				// 获取提现明细列表
				this.getWithdrawList(true, ++this.page);
			},
			/**
			 * 查看驳回原因
			 */
			triggerReasonMsg: function(e) {
				wx.showModal({
					// title: this.applyStatus['30'] + '原因',
					title: '友情提示',
					content: e.currentTarget.dataset.reason,
					showCancel: false
				});
			},
		}
	}
</script>
<style lang="scss">
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	/* 选项卡 */
	.swiper-tab {
		width: 100%;
		text-align: center;
		height: 80rpx;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.swiper-tab .swiper-tab-item {
		width: 33.333333%;
		height: 100%;
		font-size: 28rpx;
		color: #666;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 2px solid #ffffff00;
	}

	.swiper-tab .on {
		color: $uni-text-color-main;
		border-bottom: 2px solid $uni-border-color-main;
	}

	/* 设置scroll-view容器高度 */

	.widget-list,
	.yoshop-notcont {
		height: 100.1%;
	}

	/* 提现明细列表 */

	.widget-list {
		padding: 10rpx 20rpx 40rpx 20rpx;
		box-sizing: border-box;
	}

	.widget__detail {
		height: 170rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		border-bottom: 1rpx solid #ececec;
	}

	.widget__detail .detail__money {
		font-size: 30rpx;
		margin-bottom: 12rpx;
	}

	.widget__detail .detail__reason {
		margin-top: 15rpx;
		color: $uni-text-color-grey;
	}

	.col--10 {
		color: #fcc741;
	}

	.col--20,
	.col--40 {
		color: #96e0e1;
	}

	.col--30 {
		color: #f07b71;
	}
</style>
